<template>
	<view style='height:100vh;'>
		<scroll-view scroll-y style='height:86vh;'>
			<view v-if="!addList.length" class='empty'>
			   <view style="margin-top:200rpx;text-align: center">
				   <view class="cuIcon-calendar" style="font-size: 30px;"></view>
				   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
			   </view>
			</view>
			<view class="cu-list menu" v-else>
				<view class="cu-item padding" style="height: 180rpx;" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in addList" :key="index"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cuIcon-addressbook margin-right-sm" style="width: 50upx;font-size:42upx;"></view>
					<view class="content"  @tap="handleAddress(item.addr_id)">
						<view class="text-cut">
							<text class="text-df margin-right-sm">{{item.name}}</text>
							<text class="text-lg">{{item.mobile}}</text>
							<view class='margin-left-sm' v-if="item.def_addr === 1">
								<text class='bg-red radius text-sm' style="padding:4upx 8upx">默认</text>
							</view>
						</view>
						<view class="text-sm flex flex-direction">
							<view class="text-sm"  style="line-height: 40upx;">
								{{item.province|| ''}}{{item.city|| ''}}{{item.county|| ''}}{{item.town|| ''}}{{item.addr|| ''}}
							</view>
						</view>
						<view class="margin-top-xs" v-if="item.ship_address_name">
							<view class='text-xs cu-tag radius line-grey'>{{item.ship_address_name}}</view>
						</view>
					</view>
					<view class="action"  @tap="editAddr(item.addr_id)">
						<text class="cuIcon-edit lg" style="font-size:42upx;"></text>
					</view>
					<view class="move">
						<view class="bg-red" @tap="delAddr(item)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-theme lg" @tap="addAddr">
				<text class="cuIcon-add" style="font-size: 20px;"></text>
				<text class="text-xl">新增收货地址</text>
			</button>
		</view>
	</view>
</template>

<script>
	import * as Addr_API from '@/api/member/address.js'
	import * as Checkout_API from '@/api/checkout.js'
	export default {
		data() {
			name:'address'
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				id:'',
				state: 2,
				addList:[],
				type:'',
				izOrder:0
			};
		},
		onLoad(e) {
			console.log(e)
			if(e.izOrder){
				this.izOrder = e.izOrder
			}
			this.GET_AddressList()
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_AddressList()
			}, 200);
		},
		onShow(e) {
			// console.log('ee====',e)
			const pages = getCurrentPages()
			const currPage = pages[pages.length - 1]  // 当前页
			// console.log(currPage.data)
			this.GET_AddressList()
		},
		methods:{
			defaultFun(item){
				this.id = item.id
				if (this.state === 1){
				    uni.navigateBack({
				        delta: 1
				    })
				}
			},
			GET_AddressList(){
				Addr_API.getAddrList().then(res =>{
					this.addList = res
				})
			},
			editAddr(id){
				let type = this.type || 'edit'
				uni.navigateTo({url:'./addressAdd/addressAdd?type='+type+'&id='+id})
			},
			addAddr(){
				let izOrder = this.izOrder
				uni.navigateTo({url:'./addressAdd/addressAdd?add=1&izOrder='+izOrder})
			},
			delAddr(item){
				let title=''
				if(this.addList.length===1){
					title = '您确定要删除这唯一地址吗？'
				}else{
					title ='你将删除这个收货地址？'
				}
				uni.showModal({
					title: '删除提示',
					content: title,
					success: (res)=>{
						if (res.confirm) {
							Addr_API.deleteAddr(item.addr_id).then(res=>{
								if(res.status === 500){
									uni.showToast({
										icon:'none',
										title:res.response.data.message
									})
								}else{
									uni.showToast({
										icon:'success',
										title:'成功删除'
									})
									this.GET_AddressList()
								}
							})
						}
					}
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			handleAddress(id){
				if(this.izOrder+'' === '1'){
					// console.log('选个地址')
					Checkout_API.setCheckoutAddr(id).then(res =>{
						uni.navigateBack()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/ .cu-list>.cu-item .move {
	width: 120upx;
}
/deep/ .cu-list>.cu-item.move-cur {
	transform: translateX(-120upx)
}
.list .item{
  display: flex;
  margin: 0 18px;
  border-bottom: 1px solid #dedede;
  padding: 15px 0;
  align-items: center;
  height: 98px;
}
.item .left{
  flex: 1 0 80%;
  font-size: 14px;
}
.item .edit,.choice{
  flex: 1 0 10%;
  text-align: center;
}
.item .edit image{
  width: 20px;
  height: 20px;
}
.item .choice image{
  width: 20px;
  height: 20px;
}

.btn{
  height: 8vh;
  line-height: 8vh;
  // text-align: center;
  // background:$color-main;
  // font-size: 14px;
  // color: #fff;
}
.submitBtn{
	position: absolute;
	// bottom: 50upx;
	height:10vh;
	width: 80%;
	margin: 20upx 10% 0;
}
</style>
